<template>
<div class="">
    <div class="pr10">
        <div class="analyItem">
            <p class="analyItemTit tx-center">状态</p>
            <div class="analyItemCon">

            </div>
        </div>
    </div>
    <div class="thinScroll pr10" v-scrollHeight="84">
        <router-link tag="div" exact :to="{path:routerPath('Screening'),query:{selectparm: 1}}" class="analyItem  anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">分司</p>
            <div class="analyItemCon">
                <el-select
                    @change="cityChange()"
                    class="col-md-5 mr10 selectCityBox"
                    v-model="dqidValue"
                    placeholder="请选择分司">
                    <el-option
                        v-for="item in cityOptions"
                        :key="item.dq_id"
                        :label="item.dq_name"
                        :value="item.dq_id">
                    </el-option>
                </el-select>

            </div>
        </router-link>
         <router-link tag="div" exact :to="{path:routerPath('Screening'),query:{selectparm: 2}}" class="analyItem  anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">区域</p>
            <div class="analyItemCon">
                <el-select
                    @change="saveDataFilter()"
                    class="col-md-6"
                    v-model="areaValue"
                    placeholder="请选择区域">
                    <el-option
                        v-for="item in areaOptions"
                        :key="item.Id"
                        :label="item.city"
                        :value="item.Id">
                    </el-option>
                </el-select>
            </div>
       </router-link>
        <router-link tag="div" exact :to="{path:routerPath('Screening'),query:{selectparm: 4}}" class="analyItem  anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">类型</p>
            <div class="analyItemCon">
                <div class="col-md-6">
                    <el-select
                        @change="saveDataFilter()"
                        v-model="type"
                        placeholder="请选择类型">
                        <el-option
                            v-for="item in typeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="col-md-6">
                    <p>匹配20分满分，不匹配得0分</p>
                </div>
            </div>
       </router-link>
        <router-link tag="div" exact :to="{path:routerPath('Screening'),query:{selectparm: 5}}" class="analyItem  anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">金额</p>
            <div class="analyItemCon">
               <p class="col-md-5">
                   <el-input placeholder="请输入项目金额" v-model="money"  @blur="saveDataFilter()"></el-input>
                </p>
            </div>
       </router-link>
        <router-link tag="div" exact :to="{path:routerPath('Screening'),query:{selectparm: 6}}" class="analyItem  anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">级别/试用期</p>
            <div class="analyItemCon">
                <p>级别不够直接不可用，达到级别可用，满分13分，每大于可接单级别1级扣2分</p>
            </div>
         </router-link>
          <router-link tag="div" exact :to="{path:routerPath('Screening'),query:{selectparm: 7}}" class="analyItem  anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">在施额</p>
            <div class="analyItemCon">
                <p>满分17分，在施金额/级别接单总限额=在施占比，在施分数=在施占比*17</p>
            </div>
        </router-link>
         <router-link tag="div" exact :to="{path:routerPath('Screening'),query:{selectparm: 8}}" class="analyItem  anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">接单个数</p>
            <div class="analyItemCon">
                <p>基础分17分，新人（第一个额外加7分，第二个减5分） （新人条件（第一个是新人）第三个以上算老人）
若项目经理接单为4个或者4个以上减17分，3个减13分，2个减9分，1个减5分，0个减0分</p>
            </div>
        </router-link>
        <router-link tag="div" exact :to="{path:routerPath('Screening'),query:{selectparm: 9}}" class="analyItem  anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">未接天数</p>
            <div class="analyItemCon">
                <p>天数大于100得10分 ，99-90 得9分， 89-80 得8分....（封停、冻结、打烊不算未接天数）</p>
            </div>
         </router-link>
        <router-link tag="div" exact :to="{path:routerPath('Screening'),query:{selectparm: 10}}" class="analyItem  anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">投诉</p>
            <div class="analyItemCon">
                <p>一次投诉按投诉类型科目减分（30天）</p>
            </div>
         </router-link>
        <router-link tag="div" exact :to="{path:routerPath('Screening'),query:{selectparm:11}}" class="analyItem  anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">拒单</p>
            <div class="analyItemCon">
                <p>一次拒单减5分（30天）</p>
            </div>
         </router-link>
                 <router-link tag="div" exact :to="{path:routerPath('Screening'),query:{selectparm: 12}}" class="analyItem  anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">退单</p>
            <div class="analyItemCon">
                <p>一次退单减8分（30天）</p>
            </div>
         </router-link>
    </div>
    <div class="pr10">
        <router-link tag="div" exact :to="{path:routerPath('Screening'),query:{selectparm:0}}" class="analyItem  anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">结果</p>
            <div class="analyItemCon">
                <p></p>
            </div>
         </router-link>
    </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { getDiquByCity, getPmUserInfoMatchCity } from '../Resources/Api/index'
export default {
    data () {
        return {
            areaValue: '', // 区域Id value
            dqidValue: '', // 分司Id value
            cityOptions: [], // 分司数组List
            areaOptions: [], // 区域数组List
            typeList: [
                {
                    id: 1,
                    name: '办公'
                },
                {
                    id: 2,
                    name: '餐饮'
                },
                {
                    id: 3,
                    name: '商业'
                },
                {
                    id: 4,
                    name: '酒店'
                },
                {
                    id: 6,
                    name: '教育'
                },
                {
                    id: 7,
                    name: '会所'
                },
                {
                    id: 8,
                    name: '家装'
                },
                {
                    id: 9,
                    name: '别墅'
                }
            ], // 类型list
            type: '', // 类型
            money: '' // 金额
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'twoToThreeInfo'])
    },
    created () {
        this.getDiquByCity()
    },
    methods: {
        ...mapMutations({
            setTwoThreeInfo: `SET_TWO_TO_THREE_INFO`
        }),
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        },
        // 获取城下的分司
        getDiquByCity () {
            let prams = {
                dqId: this.leftInfo.cityId
            }
            getDiquByCity(prams).then((results) => {
                if (results.data.StatusCode === 0) {
                    this.cityOptions = []
                    if (results.data.Body.length > 0) {
                        this.cityOptions = results.data.Body[0]
                    }
                }
            }).catch((error) => {
                console.log(error)
            })
        },
        // 存vuex 数据
        saveDataFilter () {
            // 将改变的数据存到twoToThreeInfo中
            const object = this.twoToThreeInfo
            console.log(this.areaValue)
            this.setTwoThreeInfo({
                ...object,
                cityValue: this.dqidValue,
                areaValue: this.areaValue,
                typeValue: this.type,
                moneyValue: this.money
            })
        },
        // 分司改变的操作(获取区域列表)
        cityChange () {
            this.saveDataFilter()
            this.areaOptions = []
            getPmUserInfoMatchCity({area: this.dqidValue}).then((results) => {
                if (results.data.StatusCode === 0) {
                    if (results.data.Body.length > 0) {
                        const list = results.data.Body[0]
                        this.areaOptions = list
                    }
                }
            }).catch(() => {

            })
        }
    },
    watch: {
        leftInfo () {
            this.areaValue = '' // 区域Id value
            this.dqidValue = '' // 分司Id value
            this.areaOptions = []
            this.type = ''
            this.money = ''
            this.getDiquByCity()
            this.setTwoThreeInfo({})
        }
    }
}
</script>
<style lang="scss" scoped>
    .selectCityBox {
        .el-tag.el-tag--mini {
            height: 18px;
            line-height: 17px;
        }
        .el-select .el-tag__close.el-icon-close {
            right: -5px;
            top: -1px;
        }
    }
</style>
